import React, { Component } from 'react';
import { 
    NavLink,
    Route,
    Switch,
    BrowserRouter as Router
 } from 'react-router-dom';
import Det from './Detail';
import Detail from './Detail';



 class Two extends Component {
    constructor(props){
        super(props);
        this.state = {
            list: ["你是一头大肥猪","小猪猪","HelloKETY"]
        }
    }
    render() {
        return (
            
            <div>
                <detail></detail>
                这是第二个页面
                <Router>
               
                <ul>
                   {
                       this.state.list.map((item)=>{
                           return <li>
                               <NavLink to={`/detail/:${item}`} > {item} </NavLink>
                           </li>
                       })
                   }
                </ul>
                {/* <Switch>
                   <Route path='/detail/:tel' component={Detail}><Detail></Detail>Detail页面</Route>
                </Switch> */}
                   {/* <div>
                       <Detail></Detail>
                   </div> */}
                 </Router>
            </div>
        )
    }
}

// class Detail extends React.Component{
//     reder(){
//         return(
//             <div>
//                 <h2>这是详情页</h2>
//                 <p> {this.props.match.params.tel} </p>
//             </div>
//         )
//     }
// }
export default Two;
